﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Template.Master" AutoEventWireup="true" CodeBehind="ChiTiet.aspx.cs" Inherits="CameraProjects.ChiTiet" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script> 
<script src="/js/jquery-slider.js" type="text/javascript"></script>
<script src="/js/easyResponsiveTabs.js" type="text/javascript"></script>
<link href="/css/easy-responsive-tabs.css" rel="stylesheet" type="text/css" media="all"/>
<link rel="stylesheet" href="/css/global.css"/>
<script src="/js/slides.min.jquery.js"></script>
<script>
    $(function () {
        $('#products').slides({
            preload: true,
            preloadImage: '/images/loading.gif',
            effect: 'slide, fade',
            crossfade: true,
            slideSpeed: 350,
            fadeSpeed: 500,
            generateNextPrev: true,
            generatePagination: false
        });
    });
	</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div class="details">
				  <div class="product-details">				
					<div class="images_3_of_2">
						<div id="container">
						   <div id="products_example">
							<div id="products">
								<div class="slides_container">
									 <a href="#" target="_blank"><img src="/images/ixus125hs_01.jpg" alt=" " /></a>
									<a href="#" target="_blank"><img src="/images/ixus125hs_02.jpg" alt=" " /></a>
									<a href="#" target="_blank"><img src="/images/ixus125hs_03.jpg" alt=" " /></a>
									<a href="#" target="_blank"><img src="/images/ixus125hs_04.jpg" alt=" " /></a>
                                    <asp:DataList ID="dtImages" runat="server">
                                        <ItemTemplate>
                                            <a href="#" target="_blank"><img src='<%#Eval("Link") %>' alt=" " /></a>
                                        </ItemTemplate>
                                    </asp:DataList>
									<%--<a href="#" target="_blank"><img src="/images/productslide-3.jpg" alt=" " /></a>--%>	
								</div>
								<ul class="pagination">
									<li><a href="#"><img src="/images/ixus125hs_01.jpg" alt=" " /></a></li>
									<li><a href="#"><img src="/images/ixus125hs_02.jpg" alt=" " /></a></li>
									<li><a href="#"><img src="/images/ixus125hs_03.jpg" alt=" " /></a></li>
									<li><a href="#"><img src="/images/ixus125hs_04.jpg" alt=" " /></a></li>
									<%--<li><a href="#"><img src="/images/thumbnailslide-3.jpg" alt=" " /></a></li>--%>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<div class="desc span_3_of_2">
					<h2> <asp:Label ID="lblName" runat="server" Text="Label"></asp:Label> </h2>
                    
					<%--<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p>--%>					
					<div class="price">
						<p>Giá: <asp:Label ID="lblPrice" runat="server" Text="Label"></asp:Label> <span></span></p>
					</div>
					<%--<div class="available">
						<p>Available Options :</p>
					<ul>
						<li>Color:
							<select>
							<option>Silver</option>
							<option>Black</option>
							<option>Dark Black</option>
							<option>Red</option>
						</select></li>
						<li>Size:<select>
							<option>Large</option>
							<option>Medium</option>
							<option>small</option>
							<option>Large</option>
							<option>small</option>
						</select></li>
						<li>Quality:<select>
							<option>1</option>
							<option>2</option>
							<option>3</option>
							<option>4</option>
							<option>5</option>
						</select></li>
					</ul>
					</div>--%>
				<div class="share-desc">
					<div class="share">
						<p>Share Product :</p>
						<ul>
					    	<li><a href="#"><img src="/images/fb.png" alt=""></a></li>
					    	<li><a href="#"><img src="/images/twiter.png" alt=""></a></li>	
					    	<li><a href="#"><img src="/images/rss.png" alt=""></a></li>					    
			    		</ul>
					</div>
					<div class="button"><span><a href="#">Add to Cart</a></span></div>					
					<div class="clear"></div>
				</div>
				 <%--<div class="wish-list">
				 	<ul>
				 		<li class="wish"><a href="#">Add to Wishlist</a></li>
				 	    <li class="compare"><a href="#">Add to Compare</a></li>
				 	</ul>
				 </div>--%>
			</div>
			<div class="clear"></div>
		  </div>
		<div class="product_desc">	
			<div id="horizontalTab" style="display: block; width: 100%; margin: 0px;">
				<ul class="resp-tabs-list">
					<li class="resp-tab-item resp-tab-active" aria-controls="tab_item-0" role="tab">Product Details</li>
					<li class="resp-tab-item" aria-controls="tab_item-1" role="tab">product Tags</li>
					<li class="resp-tab-item" aria-controls="tab_item-2" role="tab">Product Reviews</li>
					<div class="clear"></div>
				</ul>
				<div class="resp-tabs-container">
					<h2 class="resp-accordion resp-tab-active" role="tab" aria-controls="tab_item-0"><span class="resp-arrow"></span>Product Details</h2><div class="product-desc resp-tab-content resp-tab-content-active" style="display:block" aria-labelledby="tab_item-0">
                        <asp:Label ID="lblDetails" runat="server" Text="Label"></asp:Label>
				 <h2 class="resp-accordion" role="tab" aria-controls="tab_item-1"><span class="resp-arrow"></span>product Tags</h2><div class="product-tags resp-tab-content" aria-labelledby="tab_item-1">
						 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
					<h4>Add Your Tags:</h4>
					<div class="input-box">
						<input type="text" value="">
					</div>
					<div class="button"><span><a href="#">Add Tags</a></span></div>
			    </div>	

				<h2 class="resp-accordion" role="tab" aria-controls="tab_item-2"><span class="resp-arrow"></span>Product Reviews</h2>
                  <div class="review resp-tab-content" aria-labelledby="tab_item-2">
					    <h4>Lorem ipsum Review by <a href="#">Finibus Bonorum</a></h4>
					 <%--<ul>
					 	<li>Price :<a href="#"><img src="/images/price-rating.png" alt=""></a></li>
					 	<li>Value :<a href="#"><img src="/images/value-rating.png" alt=""></a></li>
					 	<li>Quality :<a href="#"><img src="/images/quality-rating.png" alt=""></a></li>
					 </ul>
					 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
				--%>  
                    <div class="your-review">
				  	 <%--<h3>How Do You Rate This Product?</h3>
				  	  <p>Write Your Own Review?</p>
				  	  <form>
					    	<div>
						    	<span><label>Nickname<span class="red">*</span></label></span>
						    	<span><input type="text" value=""></span>
						    </div>
						    <div><span><label>Summary of Your Review<span class="red">*</span></label></span>
						    	<span><input type="text" value=""></span>
						    </div>						
						    <div>
						    	<span><label>Review<span class="red">*</span></label></span>
						    	<span><textarea> </textarea></span>
						    </div>
						   <div>
						   		<span><input type="submit" value="SUBMIT REVIEW"></span>
						  </div>
					    </form>	--%>
				  	 </div>			
				</div>
			</div>
		 </div>
	 </div>
        </div>
	    <script type="text/javascript">
	        $(document).ready(function () {
	            $('#horizontalTab').easyResponsiveTabs({
	                type: 'default', //Types: default, vertical, accordion           
	                width: 'auto', //auto or any width like 600px
	                fit: true   // 100% fit in a container
	            });
	        });
   </script>		
   <div class="content_bottom">
   	<div class="text-h1 top1 btm">
			<h2>Lorem ipsum quis nostrud exercitation</h2>
	  	</div>
 <div class="div2">
        <div id="mcts1">
        	<img src="/images/pic2.png" alt=""/>
            <img src="/images/pic3.png" alt="" />
            <img src="/images/pic1.png" alt="" />
        	<img src="/images/pic2.png" alt=""/>
            <img src="/images/pic3.png" alt="" />
            <img src="/images/pic1.png" alt="" />

        </div>
   		</div>

    	</div>

        </div>
<div class="sidebar">
<div class="s-main">
	<div class="s_hdr">
		<h2>Máy Ảnh Khác</h2>
	</div>
	<div class="text1-nav">
		<ul style="width:100%">
        <asp:DataList ID="ddlMayAnh" runat="server" Width="100%">
            <ItemTemplate>
                
			        <li class="li-default">
                        <div style="float:left;"><img src='<%#Eval("camImages") %>' width="50" height="40"/>
                        </div>
                        <a href='<%# "ChiTiet.aspx?cate=camera&id=" + Eval("camId") %>'><%#Eval("camNames") %></a>

			        </li>
	           
            </ItemTemplate>
        </asp:DataList>
		 </ul>
	</div>
</div>
</div>
</asp:Content>
